<template>
  <div class="body">
    <!-- 结算页 -->
    <!-- <div class="header">
      <div>
        <img @click="returnGo" src="@/assets/homeimg/滑动左.png" />
        <span>结算</span>
      </div>
    </div> -->
    <div class="address" @click="toAddress">
      <img class="left" src="@/assets/homeimg/地址.png" alt />
      <div class="content" v-if="orderInfo.address">
        <p class="center">
          <span class="name">{{orderInfo.address.contactor_name}}</span>
          <span class="tel">{{orderInfo.address.phone}}</span>
        </p>
        <p class="text">{{orderInfo.address.address_text}}</p>
      </div>
      <div class="content" v-else>请选择地址</div>
      <img class="right" src="@/assets/homeimg/滑动右.png" alt />
    </div>
    <div class="card">
      <div class="card-c">
        <div class="top">
          <img :src="orderInfo.image" alt class="top-left" />
          <div class="top-right">
            <span class="title">{{orderInfo.name}}</span>
            <div class="number">
              <span>{{obj.type}}</span>
              <van-stepper disable-input v-model="orderInfo.num"  min="0" @plus="add()" @minus="jian()" />
            </div>
          </div>
        </div>
        <div class="bot">
          <van-field
            v-model="obj.message"
            rows="1"
            autosize
            label="买家留言"
            type="textarea"
            maxlength="200"
            placeholder="买家留言200字以内（选填）"
          />
        </div>
        <span class="line"></span>
        <div class="total">
          小计:
          <span>{{total}}积分</span>
        </div>
      </div>
    </div>
    <div class="btn" @click="sure">确认兑换</div>
  </div>
</template>

<script>
import integralApi from "@/api/integral";
import {
		mapState,
		mapMutations,
	} from 'vuex';
import { Toast } from "vant";
import { Dialog } from 'vant';
export default { 
  data() {
    return {
      goods_id: "",
      count: 1,
      obj: {},
	  // token:'84c3ba39-0b16-43c6-86da-c1c9e47cb44d',
	    token:'',
      score:''
    };
  },
  components: {},
  computed: {
     total(){
        var allscore = this.orderInfo.tot_score * this.orderInfo.num;
        return allscore;
     },
     ...mapState({
       orderInfo: state => state.order_info
     })
  },
  created() {
    if (localStorage.getItem("user")) {
    	var info = JSON.parse(localStorage.getItem("user"));
    }
    // this.token = info.token;
    this.token = this.$store.state.token;
    this.score = JSON.parse(localStorage.getItem("score"));
    // if (localStorage.getItem("goods_id")) {
    //   this.goods_id = JSON.parse(localStorage.getItem("goods_id"));
    // }
    // this.getPlayList();
  },

  methods: {
    returnGo() {
      this.$router.go(-1);
    },
    toAddress(){
      this.$router.push('/address?type=1')
    },
    getPlayList() {
      integralApi
        .playList({
          goods_id: this.goods_id,
          num: this.count,
          token: this.token
        })
        .then(res => {
          console.log(res);
          this.obj = res.data;
          // this.total = this.obj.tot_score;
        });
    },
    add(){
      this.obj.num++;
    },
    jian(){
      this.obj.num--;
    },
    sure(){
      console.log(this.orderInfo)
      if(!this.orderInfo.address.id){
        Toast('请先选择地址');
        return
      }
      let data = {
        goods_id: this.orderInfo.id,
        sku_id: this.orderInfo.sku_id,
        num: this.orderInfo.num,
        address_id: this.orderInfo.address.id
      }
      if(this.total == 0){
        Toast('请先添加数量');
      }else{
        this.$http.post('/api/score/sureSettle',data).then(res => {
          console.log(res);
          this.$toast.success("兑换成功!");
          this.$router.back()
        })
      }
      // var params = {
      //   goods_id: this.goods_id,
      //   num: this.obj.num,
      //   token: this.token,
      //   address_id:this.obj.address.id,
      //   remark:this.obj.message
      // }
	  // console.log(params)
      // integralApi.sureSettle({...params}).then(res=>{
      //   console.log(res)
      //   if(res.code==1){
      //       this.$toast.success("兑换成功!");
      //       this.$router.push('/record');
      //   }else{
      //     this.$toast.success("积分不足!");
      //   }
      // })
    }
  }
};
</script>

<style scoped lang="scss">
.body {
  color: #333333;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: rgba(247, 247, 247, 1);
  background-size: 100% 100%;
}
.header {
  // font-weight: bold;
  width: 100vh;
  text-align: center;
 height: 2.75rem;
 line-height: 2.75rem;
 padding-top: 1.25rem;
  position: relative;
  background: rgba(255, 255, 255, 1);
  color: #333333;
  font-size: 1.25rem;
  img {
    width: 0.625rem;
    height: 1.125rem;
    position: absolute;
    left: 1rem;
    bottom: 0.75rem;
  }
}
// 在scss文件中
	@supports(bottom:constant(safe-area-inset-top)) {

		// 如果存在底部安全区域
		.header {
			padding-top: constant(safe-area-inset-top);

		}

	}

	@supports(bottom:env(safe-area-inset-top)) {

		// 如果存在底部安全区域
		.header {
			padding-top: env(safe-area-inset-top);

		}

	}
.address {
  width: 100%;
  height: 5.625rem;
  background-color: #ffffff;
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  padding: 0 3vw 0 2vw;
  box-sizing: border-box;
  .left {
    width: 3.125rem;
    height: 3.125rem;
    border-radius: 50%; 
    // margin-left: 0.625rem;
  }
  .content {
    width: 14.875rem;
    // height: 3.125rem;
    margin-left: 0.625rem;
    line-height: 3.125rem;
    flex: 1;
    .center {
      margin-top: 5px;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 2.1875rem;
      .name {
        font-size: 0.9375rem;
        color: #333333;
      }
      .tel {
        font-size: 0.75rem;
        color: rgba(102, 102, 102, 1);
        margin-left: 0.3125rem;
      }
    }
    .text {
      font-size: 0.875rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      line-height: 1.0rem;
    }
  }
  .right {
    width: 0.375rem;
    height: 0.5625rem;
    margin-left: 2.5rem;
  }
}
.card {
  width: 100%;
  // height: 14.0625rem;
  background-color: #ffffff;
  margin-top: 1.25rem;
  .card-c {
    width: 92vw;
    height: 100%;
    margin: 0 auto;
    .top {
      width: 100%;
      display: flex;
      margin-top: 20px;
      .top-left {
        width: 6.375rem;
        height: 6.375rem;
        border-radius: 0.3125rem;
      }
      .top-right {
        margin-left: 0.625rem;
        width: calc(100% - 6.375rem);
        .title {
          display: block;
          margin-top: 1.25rem;
          font-size: 0.875rem;
          font-family: PingFang SC;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          line-height: 1.125rem;
        }
        .number {
          display: flex;
          justify-content: space-between;
          // width: 27vw;
          font-size: 0.75rem;
          font-family: PingFang SC;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          line-height: 2.1875rem;
          margin-top: 20px;
        }
      }
    }
    .bot {
      width: 100%;
      border-top: 0.0625rem solid #d2d2d2;
      margin-top: 0.625rem;
    }
    .line {
      display: block;
      width: 100%;
      height: 0.0625rem;
      background: #d2d2d2;
    }
    .total {
      width: 100%;
      text-align: right;
      margin-top: 0.625rem;
      font-size: 0.75rem;
      color: #333333;
      span {
        font-size: 0.9375rem;
        color: #ff264f;
      }
    }
  }
}
.btn {
  width: 15rem;
  height: 2.25rem;
  margin: 0 auto;
  background: linear-gradient(
    90deg,
    rgba(255, 208, 65, 1) 0%,
    rgba(255, 178, 9, 1) 100%
  );
  border-radius: 1.125rem;
  color: #ffffff;
  font-size: 0.9375rem;
  text-align: center;
  line-height: 2.25rem;
  margin-top: 50px;
}
</style>
